AJAX (Asynchronous JavaScript and XML) এবং JSON (JavaScript Object Notation) একটি শক্তিশালী সংমিশ্রণ যা ডাইনামিক ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়। AJAX ব্যবহার করে ওয়েব পেজের কন্টেন্ট সার্ভার থেকে ব্যাকগ্রাউন্ডে লোড করা যায়, যাতে পেজ রিফ্রেশ না করেই নতুন তথ্য ইউজারকে প্রদর্শন করা যায়। JSON ডেটার মাধ্যমে, আমরা সহজেই ডেটা আদান-প্রদান করতে পারি।
এই উদাহরণে, আমরা দেখব কিভাবে AJAX এবং JSON ব্যবহার করে একটি ডাইনামিক ওয়েব পেজ তৈরি করা যায়, যেখানে ক্লায়েন্ট সাইডের জাভাস্ক্রিপ্ট এবং সার্ভার সাইডের জাভা (Servlet) যুক্ত হয়ে ডেটা এক্সচেঞ্জ করবে।
Steps:
- HTML (Frontend) - AJAX Call
- Java Servlet (Backend) - JSON Response
- JavaScript (AJAX) to handle the request and update the web page dynamically.
১. HTML (Frontend) - AJAX Call
HTML পেজের মধ্যে একটি ফর্ম থাকবে যা ইউজারের ইনপুট নিবে, এবং AJAX কল করবে সার্ভারকে ডাইনামিকভাবে ডেটা রিট্রাইভ করার জন্য। এখানে আমরা একটি সহজ ইনপুট ফর্ম এবং একটি বাটন তৈরি করব যা ইউজার ক্লিক করার পর AJAX রিকোয়েস্ট পাঠাবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX with JSON Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>AJAX and JSON Example</h2>
<!-- Form for input -->
<label for="userName">Enter your name:</label>
<input type="text" id="userName" name="userName">
<button onclick="getGreeting()">Get Greeting</button>
<!-- Placeholder for dynamic content -->
<div id="result"></div>
<script type="text/javascript">
// AJAX function to call the Java Servlet
function getGreeting() {
var name = document.getElementById("userName").value;
$.ajax({
url: "GreetingServlet",
type: "GET",
data: { name: name },
dataType: "json", // Expecting JSON response
success: function(response) {
// Dynamically update the page with JSON response
document.getElementById("result").innerHTML = "Hello, " + response.greeting;
},
error: function(xhr, status, error) {
console.error("Error: " + error);
}
});
}
</script>
</body>
</html>
Explanation:
- একটি ইনপুট ফিল্ড এবং বাটন রয়েছে। ইউজার নাম ইনপুট করার পর Get Greeting বাটনে ক্লিক করলে AJAX কল হবে।
- AJAX request সার্ভারে একটি
GETরিকোয়েস্ট পাঠাবেnameপ্যারামিটারসহ। - সার্ভার থেকে JSON ফর্ম্যাটে রেসপন্স আসবে, যেটি পরবর্তীতে পেজে প্রদর্শিত হবে।
২. Java Servlet (Backend) - JSON Response
এখন সার্ভার সাইডে একটি Java Servlet তৈরি করতে হবে যা ইউজারের কাছ থেকে প্রাপ্ত নামকে গ্রহণ করবে এবং JSON ফরম্যাটে একটি গ্রীটিং মেসেজ রিটার্ন করবে।
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import org.json.JSONObject;
public class GreetingServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Get the name from the request
String name = request.getParameter("name");
// Create a JSON object
JSONObject jsonResponse = new JSONObject();
// Prepare the greeting message
if (name != null && !name.isEmpty()) {
jsonResponse.put("greeting", "Hello, " + name + "!");
} else {
jsonResponse.put("greeting", "Hello, Guest!");
}
// Set response content type to JSON
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
// Send the JSON response
PrintWriter out = response.getWriter();
out.print(jsonResponse.toString());
out.flush();
}
}
Explanation:
- GreetingServlet সার্ভলেটটি ক্লায়েন্ট সাইড থেকে আসা
nameপ্যারামিটার গ্রহণ করে। - JSONObject ক্লাসের মাধ্যমে একটি JSON অবজেক্ট তৈরি করা হয়, যা গ্রীটিং মেসেজ রাখে।
- response.setContentType("application/json") ব্যবহার করে JSON আউটপুট রিটার্ন করা হয়।
৩. JavaScript (AJAX) - Handling the Request and Updating the Web Page
AJAX রিকোয়েস্টটি JavaScript দ্বারা পাঠানো হয়, এবং সার্ভার থেকে JSON রেসপন্স পাওয়ার পর, JavaScript পেজে রেসপন্স ডাইনামিকভাবে প্রদর্শন করে। পূর্বের HTML কোডের মধ্যে AJAX কলের জন্য JavaScript অংশ যুক্ত করা হয়েছে।
সার্ভলেট মেপিং
web.xml ফাইলে সার্ভলেটটি মেপ করতে হবে যাতে এটি ক্লায়েন্ট সাইড থেকে ঠিকভাবে কল করা যায়।
<servlet>
<servlet-name>GreetingServlet</servlet-name>
<servlet-class>GreetingServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GreetingServlet</servlet-name>
<url-pattern>/GreetingServlet</url-pattern>
</servlet-mapping>
সারাংশ
এই উদাহরণে, AJAX এবং JSON ব্যবহার করে একটি ডাইনামিক ওয়েব পেজ তৈরি করা হয়েছে। ক্লায়েন্ট সাইডে একটি AJAX request পাঠানো হচ্ছে সার্ভারে, এবং সার্ভার সাইডে একটি Java Servlet JSON আউটপুট দিয়ে উত্তর প্রদান করছে। JSON এর মাধ্যমে সহজে ডেটা এক্সচেঞ্জ করা সম্ভব হয়েছে, এবং AJAX ব্যবহার করে পেজ রিফ্রেশ না করেই ডাইনামিক কন্টেন্ট লোড করা হয়েছে। এই ধরনের পদ্ধতি modern web development-এ ব্যাপকভাবে ব্যবহৃত হয়।
Read more
